<template>
  <div>
    <a-spin :spinning="spinning">
      <a-row :gutter="10" :wrap="true">
        <a-col :span="3" v-for="(item, index) in list" :key="index">
          <div class="list-item" @click="viewDetail(index + 1)">
            <div class="flex-box">
              <span v-if="!item.isEdit">{{ item.title }}{{ getUnit(index) }}</span>
              <a-select
                @click.stop
                v-else
                :options="item.editOptions"
                v-model:value="item.value"
                style="width: 100%; flex: 1"
                @blur="changeSearch(item)"
              />
              <span class="edit-icon-box">
                <EditOutlined class="edit-icon" v-if="item.canEdit" @click.stop="item.isEdit = true"/>
              </span>
            </div>
            <a-tooltip
              placement="top"
              :title="item.total || 0"
              :visible="item.isOpen"
            >
              <div
                class="list-total"
                @mouseenter="
                  (e) => {
                    handleEnter(e, item);
                  }
                "
                @mouseleave="item.isOpen = false"
              >
                {{ getFrontUnit(index) }}{{ item.total || 0 }}
              </div>
            </a-tooltip>
            <div class="list-dec">详情&nbsp;&gt;</div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
    <a-drawer
      :title="workbenchView === 'staff' ? '提醒详情' : '收支提醒详情'"
      v-model:visible="visible"
      :destroyOnClose="true"
      :width="1000"
    >
      <a-tabs
        v-model:activeKey="drawerTabActive"
        :animated="true"
        ref="tabsRef"
        @change="handleTabChange"
      >
        <a-tab-pane
          :key="index + 1"
          :tab="item.title"
          v-for="(item, index) in list"
        >
          <a-table
            :columns="item.columns"
            :dataSource="dataSource"
            :loading="tableLoading"
            :pagination="pagination"
            @change="handleTableChange"
            rowKey="id"
            :scroll="{ x: 'max-content' }"
            class="mt-10"
            :customRow="customRow"
          >
            <template #bodyCell="{ text, record, index, column }">
              <template v-if="column.key === 'owner_name'">
                <span
                  :class="record.owner_id ? 'link' : ''"
                  @click.stop="onOwnerClick(record.owner_id)"
                  >{{ text || "--" }}</span
                >
              </template>
              <template v-if="column.key === 'proprietor_name'">
                <span
                  :class="record.proprietor_id ? 'link' : ''"
                  @click.stop="onProprietorClick(record.proprietor_id, record)"
                  >{{ text || "--" }}</span
                >
              </template>
              <template v-if="column.key === 'contract_number'">
                <span class="link" @click.stop="handleTableRowClick(record)">
                  {{ text }}
                </span>
              </template>
              <template v-if="column.key === 'contract_type'">
                <span>
                  {{
                    text?.indexOf("1") !== -1
                      ? "租赁合同"
                      : text?.indexOf("2") !== -1
                      ? "物业合同"
                      : ""
                  }}
                </span>
              </template>
              <template v-if="column.key === 'target_type'">
                <a-tag
                  :color="
                    text == 1 ? '#5ac61d' : text == 2 ? '#1890ff' : '#fe8122'
                  "
                >
                  {{ record.target_type_txt }}
                </a-tag>
              </template>
              <template v-if="column.key === 'target_num'">
                <span>{{text}}{{record?.target_type == 4 ? '元' : '个'}}</span>
              </template>
              <template v-if="column.key === 'complete_num'">
                <div class="status">
                  <div :style="{ fontWeight: 'bold' }">
                    {{ `${text || 0}/${record?.target_num || 0}` }}
                  </div>
                  <div
                    v-if="
                      timeIsAfter(record.plan_end) || text >= record.target_num
                    "
                  >
                    <span v-if="text >= record.target_num" class="green">
                      （已完成）
                    </span>
                    <span v-else class="red"> （未完成） </span>
                  </div>
                </div>
              </template>
              <template v-if="column.key === 'rent_price'">
                <span>{{ record.rent_price + record?.price_unit }}</span>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-drawer>
    <!-- 租客详情 -->
    <OwnerDetailDrawer
      :visible="ownerDetailVisible"
      :id="ownerId"
      @cancel="ownerDetailVisible = false"
    />
    <!--  完成情况  -->
    <CompletePlan
      :visible="completeVisible"
      :editId="editId"
      :targetType="targetType"
      @cancel="completeVisible = false"
    />
    <!--  任务详情  -->
    <IframeModal
      :visible="iframeVisible"
      title="任务详情"
      :url="iframeUrl"
      @cancel="iframeVisible = false"
    />

    <!-- 账单详情 -->
    <BillDetailDrawer
      :visible="billDetailVisible"
      :id="billDetailId"
      @cancel="billDetailVisible = false"
    />

    <!-- 业主详情 -->
    <CreateProprietor
      :visible="proprietorDetailVisible"
      :id="proprietorId"
      drawerType="view"
      @onClose="proprietorDetailVisible = false"
    />

    <!-- 合同详情 -->
     <ContractDetailDrawer
      :visible="contractDetailVisible"
      :id="contractDetailId"
      @handleCancel="
        () => {
          contractDetailVisible = false;
        }
      "
    />
  </div>
</template>

<script>
import {
  defineComponent,
  ref,
  computed,
  watch,
  nextTick,
  reactive,
  toRefs,
  defineAsyncComponent
} from "vue";
import request from "../../../common/utils/request";
import { EditOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import utils from "@/common/utils/utils";
import store from "@/store";
import moment from "moment";
import { useRouter } from "vue-router";
import OwnerDetailDrawer from "@/views/village/OwnerManage/modules/OwnerDetailDrawer.vue";
import CompletePlan from "@/views/village/AttractPlan/modules/completePlan.vue";
import IframeModal from "./IframeModal.vue";
import BLCOMMON from "bl-common-vue3";
import BillDetailDrawer from "@/views/bill/BillDetail/modules/BillDetailDrawer.vue";
import CreateProprietor from "@/views/contract/CostContract/modules/CreateProprietor.vue";
import {RECEIVABLE, PAYABLE, EXPIRE_OWNER, EXPIRE_LANDLORD} from "@/views/home/constant";
import _ from "lodash";
const ContractDetailDrawer = defineAsyncComponent(() =>
    import("@/views/contract/ContractDetail/ContractDetailDrawer.vue")
);

export default defineComponent({
  name: "financeList",
  props: {
    workbenchView: {
      type: String,
      default: "",
    },
    refresh: {
      type: [Number, String],
      default: 0,
    }
  },
  components: {
    BillDetailDrawer,
    CompletePlan,
    OwnerDetailDrawer,
    IframeModal,
    CreateProprietor,
    EditOutlined,
    ContractDetailDrawer
  },
  setup(props, context) {
    const $router = useRouter();
    const state = reactive({
      visible: false,
      drawerTabActive: 1,
      dataSource: [],
      tableLoading: false,
      list: [],
      spinning: false,
      listTimer: null,
      ownerId: 0,
      ownerDetailVisible: false,
      completeVisible: false,
      editId: 0,
      targetType: 0,
      iframeUrl: "",
      iframeVisible: false,
      billDetailVisible: false,
      billDetailId: 0,
      proprietorDetailVisible: false,
      proprietorId: 0,

      contractDetailVisible:false,
      contractDetailId:0
    });

    const page = ref(1);
    const limit = ref(10);
    const total = ref(0);
    const pagination = computed(() => ({
      total: total.value,
      current: page.value,
      pageSize: limit.value,
      showSizeChanger: true,
    }));

    const getTableData = () => {
      clearTimeout(state.listTimer);
      state.listTimer = setTimeout(() => {
        state.tableLoading = true;
        let params = {
          page: page.value,
          limit: limit.value,
          tab: state.drawerTabActive,
        };
        let requestUrl = "";
        if (props.workbenchView === "boss") {
          requestUrl = "/workbench/overdueBillList";
          if ([3, 4].includes(state.drawerTabActive)) {
            params.role = 1;
          }
        } else if (props.workbenchView === "finance") {
          requestUrl = "/workbench/contractExpire/list";
          if ([5, 6, 7, 8].includes(state.drawerTabActive)) {
            params.role = 2;
          }
        } else if (props.workbenchView === "staff") {
          requestUrl = "/workbench/roomRentCountList";
          params.uid = store.getters.userInfo.uid;
        }
        if (props.workbenchView === "finance" && [5, 6].includes(state.drawerTabActive)) {
          requestUrl = "/workbench/overdueBillList";
          if (state.drawerTabActive == 5) {
            params.tab = 3
          }
          if (state.drawerTabActive == 6) {
            params.tab = 4
          }
        }
        request
          .get("/org", requestUrl, params)
          .then((res) => {
            state.dataSource = res.list;
            total.value = res.total;
            state.tableLoading = false;
          })
          .catch((err) => {
            state.tableLoading = false;
          });
      }, 500);
    };

    const reset = () => {
      page.value = 1;
      total.value = 0;
      state.dataSource = [];
    };

    const viewDetail = (active) => {
      state.drawerTabActive = active;
      state.visible = true;
      reset();
      getTableData();
    };

    const handleTabChange = () => {
      reset();
      getTableData();
    };

    const handleTableChange = (pager, filters, sorter) => {
      page.value = pager.current;
      limit.value = pager.pageSize;
      getTableData();
    };

    const handleTableRowClick = (record) => {
      if (props.workbenchView === "boss") {
        if (state.drawerTabActive == "6") {
          // 跳往合同详情
          state.contractDetailId = record.id
          state.contractDetailVisible = true
        } else {
          // 账单详情
          state.billDetailId = record.id;
          state.billDetailVisible = true;
        }
      } else if (props.workbenchView === "finance") {
        state.contractDetailId = record.id
          state.contractDetailVisible = true
      } else if (props.workbenchView === "staff") {
        if (state.drawerTabActive == "1") {
          // 线索待处理  // 跳转到线索池 并且去往待处理
          if (
            BLCOMMON.utils.getBtnPermission(["clueManagement", "curd", "list"])
          ) {
            $router.push({
              name: "clueManagement",
              query: {
                toBeProcessed: 1,
              },
            });
          }
        } else if (state.drawerTabActive == "2") {
          // 计划完成情况
          state.editId = record.id;
          state.targetType = record?.target_type || undefined;
          state.completeVisible = true;
        } else if (state.drawerTabActive == "3") {
          // 日程待办
          if (record.third_link_url && record.third_link_url.pc_link_url) {
            let link = record.third_link_url.pc_link_url;
            state.iframeUrl = `${link}${
              link.indexOf("?") === -1 ? "?" : "&"
            }org_token=${store.getters.token}`;
            state.iframeVisible = true;
          } else {
            message.error("未返回详情链接");
          }
        } else {
          // 跳往合同详情
          state.contractDetailId = record.id
          state.contractDetailVisible = true
        }
      }
    };

    /** 查看租客 */
    const onOwnerClick = (id) => {
      if (id) {
        state.ownerId = id;
        state.ownerDetailVisible = true;
      }
    };

    /** 查看业主 */
    const onProprietorClick = (id, record) => {
      if (id) {
        if (record?.is_new == 1) {
          state.ownerId = id;
          state.ownerDetailVisible = true;
        } else {
          state.proprietorId = id;
          state.proprietorDetailVisible = true;
        }
      }
    };

    // 自定义行
    const customRow = (record) => {
      return {
        style: {
          cursor: "pointer",
        },
        onClick: (e) => handleTableRowClick(record),
      };
    };

    const getBossData = () => {
      let data = [];
      data = [
        {
          title: "目前已到期应收",
          columns: RECEIVABLE_COLUMNS,
        },
        {
          title: "目前已到期应支",
          columns: PAY_COLUMNS,
        },
        {
          title: "",
          chart_type: 4,
          columns: RECEIVABLE_COLUMNS,
          canEdit: false,
          editOptions: RECEIVABLE,
          value: 2,
          type: 'chart_1',
        },
        {
          title: "",
          chart_type: 5,
          columns: PAY_COLUMNS,
          canEdit: false,
          editOptions: PAYABLE,
          value: 2,
          type: 'chart_2',
        },
        {
          title: "已逾期租客欠款",
          columns: RECEIVABLE_COLUMNS,
        },
        {
          title: "目前租客已到期",
          columns: EXPIRED_TENANT_COLUMNS,
        },
        {
          title: "今日其他应收",
          columns: RECEIVABLE_COLUMNS,
        },
        {
          title: "今日其他应支",
          columns: PAY_COLUMNS,
        },
      ];
      state.list = data;
      state.spinning = true;
      // 获取设置信息
      request
        .get("/org", "/chart/getViewSet", {role: 1})
        .then((res) => {
          data = data.map((v) => {
            if (v.chart_type) {
              let _result = (res.userChartList || []).find((item) => item.chart_type == v.chart_type);
              let _resultData = _result ? _result[v.type] : undefined;
              let selectData = _resultData ? _resultData : res?.chart_config?.chart_init ? res.chart_config.chart_init[v.type] : v.value;
              v.value = selectData;
              v.title = v.editOptions.find((item) => item.value == selectData)?.label;
              v.canEdit = !!res.chart_config?.is_member;
            }
            return v;
          })
          state.list = data;
          request
            .get("/org", "/workbench/billStatistics", {role: 1})
            .then((res) => {
              data.forEach((item, index) => {
                item.total = res[`total${index + 1}`];
              });
              state.list = data;
              state.spinning = false;
            })
            .catch((err) => {
              state.spinning = false;
            });
        })
    };

    const getFinanceData = () => {
      let data = [];
      data = [
        {
          title: "今日租客到期",
          columns: EXPIRED_TENANT_COLUMNS,
        },
        {
          title: "今日房东到期",
          columns: FINANCE_LANDLORD_COLUMNS,
        },
        {
          title: "已逾期未退租",
          columns: EXPIRED_TENANT_COLUMNS,
        },
        {
          title: "已逾期未续房东",
          columns: FINANCE_LANDLORD_COLUMNS,
        },
        {
          title: "",
          chart_type: 6,
          columns: RECEIVABLE_COLUMNS,
          canEdit: false,
          editOptions: RECEIVABLE,
          value: 2,
          type: 'chart_1',
        },
        {
          title: "",
          chart_type: 7,
          columns: PAY_COLUMNS,
          canEdit: false,
          editOptions: PAYABLE,
          value: 2,
          type: 'chart_2',
        },
        {
          title: "",
          chart_type: 8,
          columns: EXPIRED_TENANT_COLUMNS,
          canEdit: false,
          editOptions: EXPIRE_OWNER,
          value: 1,
          type: 'chart_3',
        },
        {
          title: "",
          chart_type: 9,
          columns: FINANCE_LANDLORD_COLUMNS,
          canEdit: false,
          editOptions: EXPIRE_LANDLORD,
          value: 2,
          type: 'chart_4',
        },
      ];
      state.list = data;
      state.spinning = true;
      request
        .get("/org", "/chart/getViewSet", {role: 2})
        .then((res) => {
          data = data.map((v) => {
            if (v.chart_type) {
              let _result = (res.userChartList || []).find((item) => item.chart_type == v.chart_type);
              let _resultData = _result ? _result[v.type] : undefined;
              let selectData = _resultData ? _resultData : res?.chart_config?.chart_init ? res.chart_config.chart_init[v.type] : v.value;
              v.value = selectData;
              v.title = v.editOptions.find((item) => item.value == selectData)?.label;
              v.canEdit = !!res.chart_config?.is_member;
            }
            return v;
          })
          state.list = data;
          request
            .get("/org", "/workbench/contractExpire/count", {role: 2})
            .then((res) => {
              let result = res?.returnData || {};
              data.forEach((item, index) => {
                item.total = result[`total_${index + 1}`];
              });
              state.list = data;
              state.spinning = false;
            })
            .catch((err) => {
              state.spinning = false;
            });
        })
    };

    // 切换
    const changeSearch = (item) => {
      item.isEdit = false;
      item.title = item.editOptions.find((v) => v.value == item.value)?.label;
      let params = {
        content: {
          chart_type: item.chart_type,
          role: props.workbenchView === 'boss' ? 1 : 2, // 老板1 财务2
        },
        chart_type: item.chart_type,
      }
      params.content[item.type] = item.value;
      request.post("/org", "/chart/setSearch", params).then((res) => {
        message.success(res.msg || "保存成功！");
        changeData(props.workbenchView);
      });
    };

    const getStaffData = () => {
      let data = [];
      data = [
        {
          title: "线索待处理",
          columns: CLUE_COLUMNS,
        },
        {
          title: "招商计划任务",
          columns: PLAN_COLUMNS,
        },
        {
          title: "今日待办任务",
          columns: WAIT_TO_BE_DONE_COLUMNS,
        },
        {
          title: "当前出租房源",
          columns: SALE_HOUSE_COLUMNS,
        },
        {
          title: "当前收房",
          columns: FORECLOSURE_COLUMNS,
        },
        {
          title: "过去30天出租房源",
          columns: SALE_HOUSE_COLUMNS,
        },
        {
          title: "过去60天出租房源",
          columns: SALE_HOUSE_COLUMNS,
        },
        {
          title: "过去90天出租房源",
          columns: SALE_HOUSE_COLUMNS,
        },
      ];
      state.list = data;
      state.spinning = true;
      request
        .get("/org", "/workbench/userTopData", {
          uid: store.getters.userInfo.uid,
        })
        .then((res) => {
          data.forEach((item, index) => {
            item.total = res[`total${index + 1}`];
          });
          state.list = data;
          state.spinning = false;
        })
        .catch((err) => {
          state.spinning = false;
        });
    };

    const changeData = (currentView) => {
      if (currentView === "boss") {
        // 老板工作台
        getBossData();
      } else if (currentView === "finance") {
        // 财务工作台
        getFinanceData();
      } else if (currentView === "staff") {
        // 员工工作台
        getStaffData();
      }
    };

    watch(
      () => props.workbenchView,
      (val) => {
        //console.log(val, 'val=====')
        if (val) {
          changeData(val);
        }
      },
      { deep: true, immediate: true }
    );

    watch(
      () => props.refresh,
      (val) => {
        // console.log(val, '刷新了')
        changeData(props.workbenchView);
      },
    );

    const getUnit = (index) => {
      if (props.workbenchView === "finance") {
        // 财务工作台
        if ([4, 5].includes(index)) {
          return "（元）";
        } else {
          return "（个）";
        }
      } else if (props.workbenchView === "boss") {
        // 老板工作台
        if ([0, 1, 2, 3, 4].includes(index)) {
          return "（元）";
        } else if ([5].includes(index)) {
          return "（个）";
        } else {
          return "";
        }
      } else if (props.workbenchView === "staff") {
        // 员工工作台
        if ([0].includes(index)) {
          return "（条）";
        } else if ([1, 2].includes(index)) {
          return "（个）";
        } else {
          return "（套）";
        }
      }
    };

    const getFrontUnit = (index) => {
      if (props.workbenchView === "finance") {
        // 财务工作台
        if ([4, 5].includes(index)) {
          return "￥";
        } else {
          return "";
        }
      } else if (props.workbenchView === "boss") {
        // 老板工作台
        if ([0, 1, 2, 3, 4, 6, 7].includes(index)) {
          return "￥";
        } else {
          return "";
        }
      } else if (props.workbenchView === "staff") {
        // 员工工作台
        return "";
      }
    };

    const timeIsAfter = (time) => {
      let now = moment();
      return now.isAfter(moment(time).add(1, "days"));
    };

    const isBeyond = (e) => {
      const ev = window.event || e;
      const textContent = ev.target;
      const clientW = textContent.clientWidth;
      const scrollW = textContent.scrollWidth;
      return scrollW > clientW; // true为溢出  false为不溢出
    };
    const handleEnter = (e, item) => {
      item.isOpen = isBeyond(e);
    };

    return {
      ...toRefs(state),
      viewDetail,
      customRow,
      handleTableChange,
      pagination,
      getUnit,
      getFrontUnit,
      handleTabChange,
      timeIsAfter,
      handleTableRowClick,
      onOwnerClick,
      handleEnter,
      onProprietorClick,
      changeSearch,
    };
  },
});
// 应收 columns
const RECEIVABLE_COLUMNS = [
  {
    title: "对方名称",
    dataIndex: "owner_name",
    key: "owner_name",
    fixed: "left",
    className: "owner_name",
    width: 120,
  },
  {
    title: "楼宇名称",
    key: "build_name",
    dataIndex: "build_name",
    fixed: store.getters.isMobile ? undefined : "left",
    width: 100,
  },
  {
    title: "费用类型",
    key: "cost_type_txt",
    dataIndex: "cost_type_txt",
    width: 105,
  },
  {
    title: "账单金额",
    dataIndex: "bill_amount",
    key: "bill_amount",
    width: 120,
    customRender: ({ text, record, index }) => {
      return "￥" + text || 0;
    },
  },
  {
    title: "应收金额",
    key: "receivable_payment",
    dataIndex: "receivable_payment",
    width: 120,
    customRender: ({ text, record, index }) => {
      return "￥" + text || 0;
    },
  },
  {
    title: "应收日期",
    dataIndex: "receivable_payment_date",
    key: "receivable_payment_date",
    width: 120,
  },
  {
    title: "有效期",
    dataIndex: "start_date",
    key: "start_date",
    width: 120,
    customRender: ({ text, record, index }) => {
      return record?.start_date + " ~ " + record?.end_date;
    },
  },
  {
    title: "滞纳金",
    dataIndex: "latefee_amount",
    key: "latefee_amount",
    width: 120,
    customRender: ({ text, record, index }) => {
      return "￥" + text || 0;
    },
  },
];
const PAY_COLUMNS = _.cloneDeep(RECEIVABLE_COLUMNS).map((item) => {
  if (item.title === "应收金额") {
    item.title = "应付金额";
  }
  if (item.title === "应收日期") {
    item.title = "应付日期";
  }
  return item;
});
// 到期租客个数
const EXPIRED_TENANT_COLUMNS = [
  {
    title: "合同编号",
    dataIndex: "contract_number",
    key: "contract_number",
    width: 200,
    className: "owner_name",
    fixed: "left",
  },
  {
    title: "租客名称",
    dataIndex: "owner_name",
    key: "owner_name",
    className: "owner_name",
    width: 120,
  },
  {
    title: "房号",
    key: "room_info",
    dataIndex: "room_info",
    width: 120,
  },
  {
    title: "楼宇名称",
    key: "build_name",
    dataIndex: "build_name",
    width: 100,
  },
  {
    title: "租赁有效期",
    key: "lease_starttime",
    customRender: ({ text, record, index }) => {
      return record?.lease_starttime + " ~ " + record?.lease_endtime;
    },
    width: 120,
  },
  {
    title: "合同类型",
    key: "contract_type",
    dataIndex: "type",
    width: 100,
  },
];
// 财务 房东 columns
const FINANCE_LANDLORD_COLUMNS = _.cloneDeep(EXPIRED_TENANT_COLUMNS).map((item) => {
  if (item.title === "租客名称") {
    item = {
      title: "业主名称",
      dataIndex: "proprietor_name",
      key: "proprietor_name",
      className: "owner_name",
      width: 120,
    };
  }
  return item;
});
// 员工 线索待处理
const CLUE_COLUMNS = [
  {
    title: "联系人名称",
    dataIndex: "contact_name",
    key: "contact_name",
    width: 120,
  },
  {
    title: "手机",
    dataIndex: "contact_phone",
    key: "contact_phone",
    width: 120,
  },
  {
    title: "公司",
    dataIndex: "company",
    key: "company",
    width: 120,
  },
  {
    title: "客户状态",
    dataIndex: "status_txt",
    key: "status_txt",
    width: 150,
  },
  {
    title: "线索来源",
    dataIndex: "clue_from_txt",
    key: "clue_from_txt",
    width: 150,
  },
  {
    title: "更新时间",
    dataIndex: "created_at",
    key: "created_at",
    width: 200,
  },
  {
    title: "意向项目",
    dataIndex: "build_name",
    key: "build_name",
    width: 150,
  },
];
// 员工 招商计划任务
const PLAN_COLUMNS = [
  {
    title: "计划标题",
    align: "center",
    dataIndex: "name",
    key: "name",
    fixed: store.getters.isMobile ? undefined : "left",
    width: 150,
  },
  {
    title: "计划执行日期",
    align: "center",
    width: 200,
    dataIndex: "plan_start",
    key: "plan_start",
    customRender: ({ text, record, index }) => {
      return record?.plan_start
        ? record?.plan_start + " 至 " + record?.plan_end
        : "--";
    },
  },
  {
    title: "执行人员",
    align: "center",
    dataIndex: "execute_unames",
    key: "execute_unames",
    customRender: ({ text, record, index }) => {
      return record?.execute_unames?.length
        ? record.execute_unames.join(" ")
        : "--";
    },
    width: 150,
  },
  {
    title: "目标类型",
    dataIndex: "target_type",
    key: "target_type",
    align: "center",
  },
  {
    title: "目标数",
    dataIndex: "target_num",
    key: "target_num",
    align: "center",
    width: 150,
  },
  {
    title: "当前进度",
    dataIndex: "complete_num",
    key: "complete_num",
    align: "center",
  },
];

const WAIT_TO_BE_DONE_COLUMNS = [
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
    width: "30%",
  },
  {
    title: "执行人员",
    dataIndex: "do_user_names",
    key: "do_user_names",
    customRender: ({ text, record, index }) => {
      return record?.do_user_names?.length
        ? record.do_user_names.join(" ")
        : "--";
    },
    width: "30%",
  },
  {
    title: "截至时间",
    dataIndex: "end_time",
    key: "end_time",
    width: "30%",
  },
];
// 员工 当前出租房源
const SALE_HOUSE_COLUMNS = [
  {
    title: "租客名称",
    dataIndex: "owner_name",
    key: "owner_name",
    className: "owner_name",
    width: 120,
  },
  {
    title: "开始日",
    dataIndex: "lease_starttime",
    key: "lease_starttime",
    width: 120,
  },
  {
    title: "结束日",
    dataIndex: "lease_endtime",
    key: "lease_endtime",
    width: 120,
  },
  {
    title: "租赁单价",
    dataIndex: "rent_price",
    key: "rent_price",
    width: 120,
  },
  {
    title: "签订日",
    dataIndex: "sign_time",
    key: "sign_time",
    width: 120,
  },
  {
    title: "楼宇名称",
    dataIndex: "build_name",
    key: "build_name",
    width: 150,
  },
  {
    title: "合同编号",
    dataIndex: "contract_number",
    key: "contract_number",
    width: 200,
  },
  {
    title: "楼号/房号",
    dataIndex: "room_info",
    key: "room_info",
    width: 150,
  },
  {
    title: "面积",
    dataIndex: "lease_area",
    key: "lease_area",
    customRender: ({ text, record, index }) => {
      return (
        (Number(record.lease_area) > 0
          ? record.lease_area
          : record.property_area) + "m²"
      );
    },
    width: 150,
  },
];
// 员工-当前收房
const FORECLOSURE_COLUMNS = [
  {
    title: "业主名称",
    dataIndex: "proprietor_name",
    key: "proprietor_name",
    className: "owner_name",
    width: 120,
  },
  {
    title: "租赁面积",
    dataIndex: "lease_area",
    key: "lease_area",
    customRender: ({ text, record, index }) => {
      return (
        (Number(record.lease_area) > 0
          ? record.lease_area
          : record.property_area) + "m²"
      );
    },
    width: 150,
  },
  {
    title: "租期时间",
    key: "lease_starttime",
    customRender: ({ text, record, index }) => {
      return record?.lease_starttime + " ~ " + record?.lease_endtime;
    },
    width: 120,
  },
  {
    title: "签订日",
    dataIndex: "sign_time",
    key: "sign_time",
    width: 120,
  },
  {
    title: "合同编号",
    dataIndex: "contract_number",
    key: "contract_number",
    width: 200,
  },
  {
    title: "楼宇名称",
    dataIndex: "build_name",
    key: "build_name",
    width: 150,
  },
  {
    title: "楼号/房号",
    dataIndex: "room_info",
    key: "room_info",
    width: 150,
  },
];
</script>

<style lang="less" scoped>
.list-item {
  height: 166px;
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  padding: 30px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .list-dec {
    color: @primary-color;
  }
  .list-total {
    font-size: 22px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
  }
  &:hover {
    background-color: @primary-color;
    color: #fff;
    .list-dec {
      color: #fff;
    }
    .edit-icon {
      color: #fff;
    }
  }
  .edit-icon {
    padding: 0 2px;
    color: @primary-color;
  }
}
.edit-icon-box {
  display: flex;
  align-items: center;
}
.status {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.green {
  color: #60d455;
}
.red {
  color: #eb6563;
}
:deep(.ant-table-row) {
  .owner_name {
    padding: 0;
    position: relative;
    span {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      display: flex;
      padding: 16px;
      align-items: center;
    }
  }
}
.flex-box {
  display: flex;
}
</style>
